<!-- total users -->
<template>
  <div class="total_sales">
    <common-card
      title="累计用户数"
      value="1,342,901">
      <template>
        <v-chart :option="getOption()"></v-chart>
      </template>
      <template v-slot:footer>
        <div class="compare_wrap">
          <div class="compare">
            <span>日同比</span>
            <span class="emphasize">7.33%</span>
            <div class="increase"></div>
          </div>
          <div class="compare">
            <span>月同比</span>
            <span class="emphasize">7.33%</span>
            <div class="decrease"></div>
          </div>
        </div>
      </template>
    </common-card>
  </div>
</template>

<script>
import commonCardMixin from "@/mixins/commonCardMixin"
export default {
  mixins:[commonCardMixin],
  methods: {
    getOption(){
      return {
        grid:{
          top: 0,
          left: 0,
          bottom:0,
          right:0,
        },
        xAxis:{
          type:"value",
          show:false
        },
        yAxis:{
          type:"category",
          show:false
        },
        series:[{
          type:"bar",
          barWidth:10,
          data:[10],
          itemStyle:{
            color:"#45c946"
          },
          z:1
        },{
          type:"bar",
          barWidth:10,
          data:[200],
          itemStyle:{
            color:"#eee"
          },
          barGap:"-100%",
          z:0
        },{
          type:"custom",
          data:[10],
          z:2,
          renderItem:(params, api)=>{
            const value = api.value(0);
            const endPoint = api.coord([value,0]);
            return {
              type: 'group',
              children:[{
                type:"path",
                position:endPoint,
                shape:{
                  d:"M320 384h384l-192 256z",
                  x:-5,
                  y:-18,
                  width:10,
                  height:10,
                  layout:"cover"
                },
                style:{
                  fill:'#45c946'
                }
              },{
                type:"path",
                position:endPoint,
                shape:{
                  d:"M320 640h384L512 384z",
                  x:-5,
                  y:10,
                  width:10,
                  height:10,
                  layout:"cover"
                },
                style:{
                  fill:'#45c946'
                }
              }]
            }
          }
        }]
      }
    }
  },
}

</script>

<style lang='less' scoped>
.compare_wrap{
  display: flex;
  .compare{
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}
</style>
